<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="shaderlib.js"></script>
</head>
<body>
<canvas id=canvas></canvas>
<script id="vertex" type="x-shader/x-shader">
precision mediump float;
attribute vec3 position;
varying vec2 posVar;
void main(){
 posVar=position.xy;
 gl_Position=vec4(position,1.0);
}
</script>
<script id="fragment" type="x-shader/x-shader">
varying vec2 posVar;
uniform float u_time;
void main(){
 float n;
 n=fbmwarp(posVar+u_time*0.1,2.5,0.8,3.0,0.3);
 n=(n+1.0)*0.5;
 vec3 color=palette(vec3(1.0,0.8,0.6),vec3(0.5,0.65,0.75),n);
 gl_FragColor=vec4(color,1.0);
}
</script>

<script id="demo">
/* global H3DU, fragmentShaderLib, renderTexture */
var vertexShader = document.getElementById("vertex").textContent;
var fragmentShader = "precision mediump float;\n" +
  fragmentShaderLib() + "\n" +
  document.getElementById("fragment").textContent;

var scene = new H3DU.Scene3D(document.getElementById("canvas"))
 .setClearColor("white");
var shader = new H3DU.ShaderInfo(vertexShader, fragmentShader);
shader.setUniforms({"u_time":0});

// /////////////////////////////////////////////////////
// Create a frame buffer info for a procedural texture
var fbo = renderTexture(scene, shader);
// //////////////////////////////////////////////////////
var b2 = new H3DU.Batch3D()
   .perspectiveAspect(45, 0.1, 100)
   .setLookAt([0, 0, 40]);
b2.getLights().setBasic();
var mesh = H3DU.Meshes.createBox(10, 20, 20);
var shape = new H3DU.Shape(mesh).setTexture(fbo);
b2.addShape(shape);
   // Create a timer
var timer = {};
  // Set up the render loop
H3DU.renderLoop(function(time) {
  "use strict";
   // Update the shape's rotation
  var q = H3DU.Math.quatFromTaitBryan(
        360 * H3DU.getTimePosition(timer, time, 6000),
       360 * H3DU.getTimePosition(timer, time, 12000),
       0
      );
  shape.setQuaternion(q);
  scene.render(b2);
});
</script>
</body>
